// import { ComponentInternalInstance, PropType } from "vue";

// type Props = {
//   iconClass: string;
//   className?: string;
//   color?: string;
// };

// const SvgIcon = (props: Props, ctx: ComponentInternalInstance) => {
//   const iconName = computed(() => `#icon-${props.iconClass}`);
//   const svgClass = computed(() => {
//     if (props.className) {
//       return `svg-icon ${props.className}`;
//     }
//     return "svg-icon";
//   });
//   return () => (
//     <>
//       <svg class={svgClass.value} aria-hidden="true">
//         <use xlinkHref={iconName.value} fill={props.color} />
//       </svg>
//     </>
//   );
// };

// export default SvgIcon;

import "./index.scss";

export default defineComponent({
  emits: ["svgClick"],
  props: {
    iconClass: {
      type: String,
      required: true,
    },
    className: {
      type: String,
      default: "",
    },
    color: {
      type: String,
      default: "",
    },
  },
  setup(props, ctx) {
    const iconName = computed(() => `#icon-${props.iconClass}`);
    const svgClass = computed(() => {
      if (props.className) {
        return `svg-icon ${props.className}`;
      }
      return "svg-icon";
    });
    const svgClick = () => {
      ctx.emit("svgClick");
    };
    return () => (
      <>
        <svg class={svgClass.value} aria-hidden="true" onClick={svgClick}>
          <use xlinkHref={iconName.value} fill={props.color} />
        </svg>
      </>
    );
  },
});
